<template>
	<view>
		<view class="card" v-for="(item,index) in words" :key="index" v-show="index===currentIndex">
			<view class="card-content">
				<view class="word word-inputs">
					<view class="input-item" v-for="(word,index) in item.word">
						<input type="text" v-model="values[index]" style="width: 20px;" />
					</view>
				</view> 
				<view class="play-autio"  @click="playVoice(item.word)">
					<image src="https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/icons/播放.png" mode="widthFix"></image>
				</view>
				<view class="reset">
					<text @click="reset()"  v-show="values.length">退回</text>
				</view>
				<view class="explain explain_zh" v-show="type==7">
					<text class="label">中文</text><text @click="showExplain=!showExplain" v-show="!showExplain">**查看提示**</text><text v-show="showExplain">{{item.explain || '------'}}</text>
				</view>
				<view class="explain explain_zh" v-show="type==8">
					<text class="label">中文</text><text>{{item.explain || '------'}}</text>
				</view>
				<view class="word word-spells">
					<view :class="['spell-item',isClick && clickIndex==index?'active':'']" v-for="(word,index) in uniqueArr" @click="inputWord(word,index)">
						{{word}}
					</view>
				</view> 
			</view>
		</view>
	</view>
</template>

<script>
	const pageDataCenter=uniCloud.importObject('page-data-center')
	const AUDIO = uni.createInnerAudioContext();
	let lowercaseLetter = [];// 小写
	for( var i=0 ; i<26 ; i++ ){
	    //输出a-z  26个小写字母
	    lowercaseLetter.push(String.fromCharCode( 97 + i ))  
	}
	export default {
		data() {
			return {
				words:[],
				type:7,
				currentIndex:0,
				isRight:null,
				isClick:false,
				clickIndex:null,
				showExplainEn:false,
				showExplain:false,
				selectVal:'',
				values:[],
				currentWord:'',
				progress:'',
				id:'',
				share: {
					title: '词汇小课堂',
					imageUrl: 'https://mp-e3fbd118-dad0-4878-b40b-44597e7aa0eb.cdn.bspapp.com/cloudstorage/2a9a20de-8e3c-4800-b520-646eeaf2133f.png',
					desc: '单词学习打打卡',
					content: '我今天学习了新单词，你也一起来呀'
				}
			}
		},
		onLoad(e) {
			this.type=parseInt(e.type)
			e.id && this.getData(e.id)
			// #ifdef MP-WEIXIN
			//解决IOS播放没声音
			wx.setInnerAudioOption({
				obeyMuteSwitch: false
			});
			// #endif
		},
		watch:{
			isClick(val){
				val && setTimeout(()=>{
					this.isClick=false
					this.clickInde=null
				},300)
			},
			progress(val){
				val && uni.setNavigationBarTitle({
					title:this.currentIndex+'/'+this.words.length
				})
			}
		},
		computed:{
			uniqueArr(){
				let spaces=this.currentWord.split("")
				let insertLen=10-spaces.length
				// 克隆数组以不修改原始数组
				const shuffled = [...lowercaseLetter].sort(() => 0.5 - Math.random());
				spaces = spaces.concat(shuffled.slice(0, insertLen))
				return spaces.sort(() => Math.random() - 0.5);
			},
		},
		methods: {
			getData(id){
				this.id=id
				pageDataCenter.getChapterListenWords(id).then((res)=>{
					console.log(res)
					this.words=res.data
					this.currentWord=this.words[0]['word']
					this.type==7 && this.playVoice(this.words[0]['word'])
					uni.setNavigationBarTitle({
						title:'1/'+res.data.length
					})
				})
			},
			inputWord(word,index){
				this.isClick=true
				this.clickIndex=index
				if(this.values.length<this.currentWord.length){
					this.values.push(word)
					this.setValue()
				}
			},
			reset(){
				this.values.splice(-1, 1)
			},
			setValue(){
				if(this.values.join("")==this.currentWord){
					setTimeout(()=>{
						this.currentIndex++
						this.showExplainEn=false
						this.showExplain=false
						this.values=[]
						this.words[this.currentIndex] && (this.currentWord=this.words[this.currentIndex]['word'])
						this.progress = `${(this.currentIndex/this.words.length)*100}%`
						this.currentIndex == this.words.length && this.submitProgress()
						this.type==7 &&  this.playVoice(this.currentWord)
					}, 500)
				}
			},
			submitProgress(redirectTo=1) {
				pageDataCenter.submitProgress({
					chapter_id:this.id,
					type:this.type,
					progress: this.progress
				},'add').then((res) => {
					console.log('submitProgress',res)
					redirectTo && uni.redirectTo({
						url:'/pages/finish/finish?id='+this.id+`&count=${this.words.length}`
					})
				})
			},
			playVoice(word) {
			  AUDIO.src = 'https://dict.youdao.com/dictvoice?type=0&audio='+word
			  this.$nextTick(function () {
			    AUDIO.play();
			  });
			},
		},
		onUnload() {
			this.submitProgress(0)
		},
		onShareAppMessage(res) {
				//实现根据不同页面返回不同的转发信息
				let pages = getCurrentPages();
				let routerUrl = pages[0].route //获取当前页的路径
				return {
					title: this.share.title,
					path: '/' + routerUrl, // 路径前面必须要加'/'
					imageUrl: this.share.imageUrl,
					desc: this.share.desc,
					content: this.share.content,
					success(res) {
						uni.showToast({
							title: '分享成功'
						})
					},
					fail(res) {
						uni.showToast({
							title: '分享失败',
							icon: 'none'
						})
					}
				}
			}
	}
</script>

<style scoped>
	page,.page{
		background-color: #e3ebee;
	}
	.card{
		padding: 20px;
		text-align: center;
		background-color: #fff;
		font-size: 16px;
		margin: 40px auto;
		border: 1px solid #eee;
		border-radius: 8px;
		width: 90%;
		min-height: 70vh;
	}
	.word-inputs{
		display: flex;
		margin: 0 auto;
		justify-content: center;
	}
	.input-item{
		border-bottom: 3px solid #333;
		margin: 0 4px;
	}
	.word-top{
		font-size: 20px;
		margin-bottom: 20px;
		font-weight: 700;
	}
	.word-spells{
		display: flex;
		margin: 70px auto;
		justify-content: center;
		flex-wrap: wrap;
	}
	.spell-item{
		width: 16%;
		border: 1px solid #eee;
		color: #666;
		font-weight: 700;
		padding: 10px;
		text-align: center;
		border-radius: 6px;
		margin: 1%;
	}
	.explain{
		margin: 18px 0;
	}
	.explain text{
		margin-right: 5px;
	}
	.label{
		background-color: #45ff8f;
		color: #fff;
		padding: 4px 10px;
		border-radius: 5px;
	}
	.option-item{
		margin-left: 5px;
	}
	.play-autio{
		margin: 12px 0;
	}
	.play-autio image{
		width: 36px;
	}
	.active{
		border-color: #00cb62;
		background-color: #8bcb96;
		color: #666;
	}
	.reset{
		color: #666;
		height: 24px;
	}
	.reset text{
		font-size: 14px;
		background: #eee;
		padding: 5px;
		border-radius: 6px;
	}
</style>
